<template>
  <div ref="content" class="layui-content">
    <slot></slot>
  </div>
</template>

<script>
import $ from 'jquery'
import BScroll from 'better-scroll'
import Loading from '@/common/loading/loading.vue'

export default {
  props: {
    dataList: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  watch: {
    dataList() {
      this.$nextTick(()=>{
        this.scroll.refresh()
        this.updated()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroll()
    })
  },
  methods: {
    initScroll() {
      const bscrollDom = this.$refs.content
      this.scroll = new BScroll(bscrollDom, { click: true })
    },
    updated() {
      // 解决better-scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。
      // 原因是better-scroll初始化是在dom加载后执行，此时图片没有下载完成，导致滚动条高度计算不准确。
      // 利用图片的complete属性进行判断，当所有图片下载完成后再对scroll重新计算。
      let img = $('.homeEdit').find('img')
      let count = 0
      let length = img.length
      if (length) {
        let timer = setInterval(() => {
          if (count == length) {
            this.scroll.refresh()
            clearInterval(timer)
          } else if (img[count].complete) {
            count++
          }
        }, 100)
      }
    },
    refresh() {
      this.scroll && this.scroll.refresh()
    }
  }
}
</script>
